package com.example.chat.view

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Divider
import androidx.compose.material.Text
import androidx.compose.material.contentColorFor
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.chat.ChatFeatureSDK
import com.example.chat.navigation.NavigationController
import com.example.chat.navigation.Screen
import com.example.chat.viewmodel.TopicListState
import com.example.chat.model.Topic
import com.example.featuresdk.theme.DemoTheme
import com.example.featuresdk.theme.subtitle
import com.example.featuresdk.view.*
import java.sql.Timestamp
import com.example.chat.R

@Composable
fun TopicListScreen(uiState: TopicListState, uiConstraints: LayoutConstraints){

    FullScreen(uiConstraints) {

        AppHeaderView(uiConstraints.appHeaderBarHeightDp){
            FeatureEntryPlaceholder()
            AppHeaderTitle(stringResource(R.string.chat_feature_desc), uiConstraints.headerWidthDp)
            HeaderSearchFeatureEntry()
        }

        AppBodyView(bodyHeightDp = {uiConstraints.appBodyHeightDp.dp}) {
            val topics by uiState.topics.collectAsState(initial = emptyList())
            TopicListView(topics, uiConstraints)
        }

        AppBottomNavigationView(ChatFeatureSDK.FEATURE_KEY)
    }
}

@Composable
fun TopicListView(topics: List<Topic>, uiConstraints: LayoutConstraints, modifier:Modifier = Modifier.fillMaxSize()){
    //Guide:https://developer.android.google.cn/jetpack/compose/lists
    LazyColumn(modifier = modifier.background(DemoTheme.colors.secondary),
        contentPadding = PaddingValues(horizontal = 0.dp,vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)){
        items(items = topics, key = {topic -> topic.id!!}){ topic ->
            TopicEntryView(topic, uiConstraints){
                NavigationController.instance.navigate(Screen.TopicDetail, topic.id.toString())
            }
        }
    }
}

@Composable
fun TopicEntryView(topic: Topic, uiConstraints: LayoutConstraints, onTopicEntryClicked:()->Unit) {

    Row(horizontalArrangement = Arrangement.Start, verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .clickable { onTopicEntryClicked() }
            .testTag("topic")){

        //Spacer(modifier = Modifier.width(uiConstraints.horizontalPaddingDp.dp))
        BadgeIcon(topic.logo, uiConstraints.topicEntryRowHeightDp,topic.message, topic.count,true)
        //Spacer(modifier = Modifier.width(uiConstraints.spacerWidthDp.dp))

        Column{
            Row{
                Column {
                    Text(text = "${topic.title}",
                        modifier = Modifier
                            .width(uiConstraints.topicTitleWidthDp.dp)
                            .height(uiConstraints.topicTitleHeightDp.dp),
                        overflow = TextOverflow.Clip,
                        style = DemoTheme.typography.title,
                        color = contentColorFor(DemoTheme.colors.secondary))

                    Text(text = "${topic.message}",
                        modifier = Modifier
                            .width(uiConstraints.topicTitleWidthDp.dp)
                            .height(uiConstraints.topicSummaryHeightDp.dp),
                        overflow = TextOverflow.Clip,
                        style = DemoTheme.typography.subtitle,
                        color = DemoTheme.colors.subtitle)
                }

                Column {
                    Text(text = "${topic.timestamp?:""}",
                        modifier = Modifier
                            .width(uiConstraints.tailingContentWidthDp.dp)
                            .height(uiConstraints.topicTitleHeightDp.dp),
                        style = DemoTheme.typography.subtitleSuffix,
                        color = DemoTheme.colors.subtitle)

                        //🔔  \uD83D\uDD14
                        //🔕  \uD83D\uDD15
                        Text(text = "\uD83D\uDD14",
                            modifier = Modifier
                                .width(uiConstraints.tailingContentWidthDp.dp)
                                .height(uiConstraints.topicSummaryHeightDp.dp),
                            style = DemoTheme.typography.subtitleSuffix,
                            color = DemoTheme.colors.subtitle)
                }
            }
            //bottom line
            Divider(modifier = Modifier.width(uiConstraints.bottomLineWidthDp.dp), Color.LightGray)
        }

        Spacer(modifier = Modifier.width(uiConstraints.spacerWidthDp.dp))
    }
}

@Preview(showBackground = true)
//@ExperimentalUnitApi
@Composable
fun PreviewTopicListScreenLight(){
    DemoTheme(darkTheme = false) {
        PreviewTopicListScreen()
    }
}

@Preview(showBackground = true)
//@ExperimentalUnitApi
@Composable
fun PreviewTopicListScreenDark(){
    DemoTheme(darkTheme = true) {
        PreviewTopicListScreen()
    }
}

//@ExperimentalUnitApi
@Composable
fun PreviewTopicListScreen(){
    val uiConstraints = LayoutConstraints().apply {
        init(Configuration().apply {
            this.screenHeightDp = 250
            this.screenWidthDp = 392
        })
    }

    val topics: List<Topic> = listOf(
        Topic(1000,"Topic 1", count=5, message = "Hello", timestamp = Timestamp(System.currentTimeMillis())),
        Topic(1001,"Topic 2", count=100, message = "Good", timestamp = Timestamp(System.currentTimeMillis())),
        Topic(1002,"Topic 3", count=0, message = "No count", timestamp = Timestamp(System.currentTimeMillis()))
    )

    val modifier = Modifier.size(uiConstraints.screenWithDp.dp,uiConstraints.screenHeightDp.dp)
    TopicListView(topics, uiConstraints,modifier )
}